{% extends "base.html" %}
{% block main_content %}
<div class="wrap-content">
    <div class="movie">
        <div class="row type">
            <h2 class="ios-title">
                <i class="fas fa-database"></i>
                数据库数据对比验证
            </h2>
        </div>
        
        <div class="row">
            <div class="col-lg-12">
                <div class="media">
                    <div class="media-body">
                        
                        <!-- 数据库连接状态 -->
                        <div class="alert {% if total_consistent %}alert-success{% else %}alert-warning{% endif %}" role="alert">
                            <h4 class="alert-heading">
                                <i class="fas {% if total_consistent %}fa-check-circle{% else %}fa-exclamation-triangle{% endif %}"></i>
                                数据验证结果
                            </h4>
                            <p class="mb-0">
                                {% if total_consistent %}
                                    🎉 数据迁移验证通过！所有表的记录数量完全一致。
                                {% else %}
                                    ⚠️ 发现数据不一致，建议检查数据迁移过程。
                                {% endif %}
                            </p>
                            <hr>
                            <small>
                                OpenGauss总记录: {{ total_opengauss }} | 
                                SQLite总记录: {{ total_sqlite }} | 
                                SQLite文件状态: {% if sqlite_exists %}✓ 存在{% else %}✗ 不存在{% endif %}
                            </small>
                        </div>
                        
                        <!-- 数据统计对比表 -->
                        <div class="row">
                            <div class="col-md-8">
                                <h3><i class="fas fa-table"></i> 数据表统计对比</h3>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th>数据表</th>
                                                <th>OpenGauss记录数</th>
                                                <th>SQLite记录数</th>
                                                <th>状态</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for table_name, data in stats.items %}
                                            <tr>
                                                <td><strong>{{ table_name }}</strong></td>
                                                <td class="text-center">{{ data.opengauss }}</td>
                                                <td class="text-center">{{ data.sqlite }}</td>
                                                <td class="text-center">
                                                    {% if data.consistent %}
                                                        <span class="badge badge-success">✓ 一致</span>
                                                    {% else %}
                                                        <span class="badge badge-danger">✗ 不一致</span>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                        <tfoot class="font-weight-bold">
                                            <tr>
                                                <td>总计</td>
                                                <td class="text-center">{{ total_opengauss }}</td>
                                                <td class="text-center">{{ total_sqlite }}</td>
                                                <td class="text-center">
                                                    {% if total_consistent %}
                                                        <span class="badge badge-success">✓ 一致</span>
                                                    {% else %}
                                                        <span class="badge badge-danger">✗ 不一致</span>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- 数据样本预览 -->
                            <div class="col-md-4">
                                <h3><i class="fas fa-eye"></i> 数据样本预览</h3>
                                
                                <!-- 产品数据样本 -->
                                <div class="card mb-3">
                                    <div class="card-header">
                                        <h5 class="mb-0">产品数据 (前10条)</h5>
                                    </div>
                                    <div class="card-body" style="max-height: 200px; overflow-y: auto;">
                                        {% for product in products %}
                                        <div class="mb-2">
                                            <strong>{{ product.name|truncatechars:25 }}</strong><br>
                                            <small class="text-muted">
                                                价格: ¥{{ product.price }} | 店铺: {{ product.shop_name|truncatechars:20 }}
                                            </small>
                                        </div>
                                        {% empty %}
                                        <p class="text-muted">暂无产品数据</p>
                                        {% endfor %}
                                    </div>
                                </div>
                                
                                <!-- 用户数据样本 -->
                                <div class="card mb-3">
                                    <div class="card-header">
                                        <h5 class="mb-0">用户数据 (前5条)</h5>
                                    </div>
                                    <div class="card-body">
                                        {% for user in users %}
                                        <div class="mb-2">
                                            <strong>{{ user.username }}</strong><br>
                                            <small class="text-muted">{{ user.email }}</small>
                                        </div>
                                        {% empty %}
                                        <p class="text-muted">暂无用户数据</p>
                                        {% endfor %}
                                    </div>
                                </div>
                                
                                <!-- 标签数据样本 -->
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="mb-0">标签数据</h5>
                                    </div>
                                    <div class="card-body">
                                        {% for tag in tags %}
                                        <span class="badge badge-secondary mr-1 mb-1">{{ tag.name }}</span>
                                        {% empty %}
                                        <p class="text-muted">暂无标签数据</p>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 操作提示 -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="mb-0"><i class="fas fa-info-circle"></i> 数据验证工具使用说明</h5>
                                    </div>
                                    <div class="card-body">
                                        <h6>命令行验证工具:</h6>
                                        <pre class="bg-light p-2"><code>cd /home/stu_wxy/openSummer/examples/DjangoOpenGauss/DjangoOpenGaussV2/code
python verify_data_migration.py</code></pre>
                                        
                                        <h6 class="mt-3">Django Admin 后台:</h6>
                                        <p>访问 <a href="/admin/" target="_blank">Django Admin</a> 查看详细的数据记录</p>
                                        
                                        <h6 class="mt-3">数据库直连工具:</h6>
                                        <ul>
                                            <li><strong>Host:</strong> localhost</li>
                                            <li><strong>Port:</strong> 8888</li>
                                            <li><strong>Database:</strong> product_recomm_sys</li>
                                            <li><strong>Username:</strong> gaussdb</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.ios-title {
    color: #007aff;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007aff;
}

.card {
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.badge {
    font-size: 0.9em;
}

.table th {
    background-color: #f8f9fa;
    border-top: none;
}

.alert {
    border-radius: 10px;
}

pre {
    border-radius: 5px;
    border: 1px solid #dee2e6;
}
</style>

{% endblock %}